02. Tab Navigator

💡React Navigation v2💡

The videos in this course cover React Navigation v1. Recently, an updated version of React Navigation was released. Here are some of the main differences between these two versions. The documentation for version 1 is located here, and the documentation for version 2 is here. The default version shipped with npm is v2, so if you want to use v1, you'd have to specify that in your package.json file.

TabNavigatorIntroduction

Tab Navigator v1

By using TabNavigator, users can navigate through different screens within an application simply by pressing tabs that render different components.

Tab Navigator v2

TabNavigator is deprecated in favor of createBottomTabNavigator. createMaterialTopTabNavigator and createMaterialBottomTabNavigator are also available as options for Android. Please note that createBottomTabNavigator does not support the animationEnabled and swipeEnabled properties.

Let's see how we'd use Tab Navigator v2.

Say we have two basic functional components that just render some text, Hello and Goodbye:

const Hello = () => (
  <View>
    <Text>Hello!</Text>
  </View>
);

const Goodbye = () => (
  <View>
    <Text>Goodbye!</Text>
  </View>
);

If we want to add two tabs for users to select (one rendering Hello, the other rendering Goodbye), first we'll need to install react-navigation and then import createBottomTabNavigator:

yarn add react-navigation

or

npm install --save react-navigation
import { createBottomTabNavigator } from 'react-navigation';

Once this is done, we can pass an object into createBottomTabNavigator like so:

const Tabs = createBottomTabNavigator({
  Hello: {
    screen: Hello
  },
  Goodbye: {
    screen: Goodbye
  },
});

Inside the object, each key-and-value pair represents a single tab. The keys represent the name of the tab; this is what users will see and press. Note that a screen property is included as well; this is the component that is rendered when the tab is active.

Here comes the interesting part: what createBottomTabNavigator returns is actually a component! Since we have stored this in a Tabs variable, we can just render this as we would with any component:

// App.js

// ...

export default class App extends React.Component {
  render() {
    return (
      <Tabs />
    );
  }
}

TabNavigator

What is true about the Tab Navigator? Please select all that apply:
SOLUTION:
  • The return value of `createBottomTabNavigator` is just a component that can be rendered like any other.
  • Tab Navigator is fully customizable.

StatusBar

Recall that so far, our application has been using arbitrary padding to account for the status bar at the top of the device's screen. Let's go ahead and change that! React Native actually provides a simple StatusBar component to customize how the status bar appears in an application.

Before we take a look at how to implement StatusBar, be sure to import it from react-native:

import { StatusBar } from 'react-native';

Let's jump in!

StatusBar

Task Description:

We've just made it possible for users to navigate between different screens. How are things looking?

Task List:

Task Feedback:

Fantastic!

Summary

React Navigator v1 offers a TabNavigator (and React Navigator v2 offers us createBottomTabNavigator) API that allows for navigation between different screens via individual tabs. Each tab is dedicated to rendering a specific component.

This section also detailed React Native's StatusBar component. StatusBar is relatively straightforward to use and is fully customizable -- we typically just set properties to change it!

In the next section, we'll take a look at React Navigator's Stack Navigator, which allows users to add and remove screens from a stack.

Further Research

Next Concept